<template>
  <div>
    <div class="banner"></div>
    <div class="bg-w">
      <div class="middle">
        <div style="padding: 50px 0 30px">
          <div class="apply-box-title">申请条件</div>
          <div class="flx-row-s-c requirement-list">
            <div
              class="flx-col-c-c"
              style="width: 50%"
              v-for="(item, index) in requireList"
              :key="index"
            >
              <div class="icon" :class="item.icon"></div>
              <span class="c-d2 f-18">{{ item.name }}</span>
              <span class="c-g f-16">{{ item.content }}</span>
            </div>
          </div>
          <h2 class="h2-title f-16 f-w-600 c-d2">加入代理赠送福利</h2>
          <div class="flx-row-s-c flx-w">
            <div
              class="welfare-item c-d2"
              v-for="(item, index) in welfareList"
              :key="index"
              :class="{ 'm-r-60': (index + 1) % 3 != 0 }"
            >
              <h3 class="f-16 f-w-600" style="margin-bottom: 8px">
                {{ item.title }}
              </h3>
              <p class="content f-14">
                {{ item.content
                }}<span class="o-form-font-button" v-if="item.about">{{
                  item.about
                }}</span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bg-g">
      <div class="middle">
        <div style="padding-bottom: 60px">
          <h2 class="h2-title f-16 f-w-600 c-d2">
            升级代理账户<span class="c-o">赚钱/省钱攻略</span>
          </h2>
          <div class="flx-row-bw-c">
            <div
              class="flx-col-s-c strategy-item"
              v-for="(item, index) in strategyList"
              :key="index"
              :class="{ 'm-r-25': (index + 1) % 5 != 0 }"
            >
              <div class="icon" :class="item.icon"></div>
              <span class="f-16 f-w-600">{{ item.name }}</span>
              <div class="line"></div>
              <p class="c-g f-14">{{ item.content }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bg-w">
      <div class="middle">
        <div style="padding-bottom: 60px">
          <h2 class="h2-title f-16 f-w-600 c-d2">
            代理账户<span class="c-o">提成明细</span>
          </h2>
          <table class="line-table-area">
            <thead>
              <tr>
                <th><div class="line-style">类型</div></th>
                <th><div class="line-style">说明</div></th>
                <th><div class="line-style">提成</div></th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in detailList" :key="index">
                <td>
                  <div class="line-style">
                    <span class="c-d2 f-14">{{ item.type }}</span>
                  </div>
                </td>
                <td>
                  <div class="line-style">
                    <span class="c-d2 f-14">{{ item.des }}</span>
                  </div>
                </td>
                <td>
                  <div class="line-style">
                    <span class="c-o f-14">{{ item.commission }}</span>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
          <h3 class="f-16 c-d2 f-w-600" style="margin: 37px 0 20px">
            注意事项
          </h3>
          <p
            class="c-d2 f-14"
            v-for="(item, index) in tipsList"
            :key="index"
            style="margin-bottom: 12px"
          >
            {{ item }}
          </p>
        </div>
      </div>
    </div>
    <div class="bg-g">
      <div class="middle">
        <div style="padding-bottom: 60px">
          <h2 class="h2-title f-16 f-w-600 c-d2">整站代理平台具有哪些功能</h2>
          <div class="function"></div>
        </div>
      </div>
    </div>
    <div class="bg-w">
      <div class="middle">
        <div class="flx-col-s-c" style="padding: 37px 0 120px">
          <div
            class="user-strong-button big-button-size"
            style="margin-bottom: 30px"
          >
            申请代理
          </div>
          <span class="c-d2"
            >代理热线<span class="c-o f-w-600" style="margin-left: 30px"
              >0755-2781 0252</span
            ></span
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      requireList: [
        {
          icon: "requ1",
          name: "需要交纳3388元加盟费",
          content: "成为代理后轻松赚钱/省钱",
        },
        {
          icon: "requ2",
          name: "拥有独立的本站账户",
          content: "对本站产品/功能有基本了解",
        },
      ],
      welfareList: [
        {
          title: "终身高级会员",
          content: "价值588元，本站终身高级会员",
        },
        {
          title: "非卖品【金品ID]",
          content:
            "精品账户ID一枚[可自选]。(赠送的精品ID为一个新的空白账户，不可替换成原账户ID)",
        },
        {
          title: "赠送具查点",
          content:
            "赠送价值500元的50万聚查点，凭自己的账户id咨询客服领取兑换券。（兑换即可生效，限定代理账户不可转增其他账户。）",
          about: "关于聚查",
        },
        {
          title: "namepre代理优惠券",
          content: "价值1000元 NamePre 平台加盟代理优惠券，3个月内有效。",
          about: "关于NamePre",
        },
        {
          title: "namepre流拍券",
          content:
            "价值500元赠送50张 NamePre平台流拍券。(兑换之日起有效期1个月）",
          about: "关于NamePre",
        },
        {
          title: "外部域名入库券",
          content: "价值500元赠送50个外部域名入库券（兑换之日起有效期1个月)",
        },
        {
          title: "定制三件套",
          content:
            "价值800元赠送定制三件套:本站吉祥物抱枕+定制版2020台历一套+本站代理授权证书",
        },
        {
          title: "非卖品【代理平台】",
          content:
            "赠送代理平台[无需技术/服务器，只需要绑定一个代理平台域名即可]",
        },
        {
          title: "企业建站代理抵扣券",
          content:
            "赠送价值2088元专享建站礼包，包含188元无门槛抵扣券+700元标准版抵扣券+1200元营销版抵扣券，咨询客服领取礼包。",
          about: "关于建站",
        },
      ],
      strategyList: [
        {
          icon: "strategy1",
          name: "域名竞价",
          content:
            "凡代理用户在本平台域名竞价得标,即可获得得标价减外部价的60%返现收益",
        },
        {
          icon: "strategy2",
          name: "域名抢注",
          content:
            "凡代理用户，在本平台域名预订抢注中直接得标，即可获得每个域名省5元的返现优惠",
        },
        {
          icon: "strategy3",
          name: "注册域名",
          content:
            "凡代理用户，于本平台注册任意后缀域名，即可享受每个域名省5元的返现优惠",
        },
        {
          icon: "strategy4",
          name: "一口价",
          content:
            "凡代理用户，在本站口价渠道购买域名，则享受域名价格2%的返现优惠（最低2元起)",
        },
        {
          icon: "strategy5",
          name: "闯入竞价",
          content:
            "在代理用户于本站进行闯入竞价操作时。即使不得标也可享受25元优惠返现",
        },
      ],
      detailList: [
        {
          type: "会员",
          des: "升级、续费(一天)",
          commission: "5元",
        },
        {
          type: "高级会员",
          des: "升级、续费(一月)",
          commission: "14元",
        },
        {
          type: "高级会员",
          des: "升级、续费(一年)",
          commission: "60元",
        },
        {
          type: "高级会员",
          des: "升级、续费(终生)",
          commission: "288元",
        },
        {
          type: "域名注册",
          des: "不管什么后缀",
          commission: "5元",
        },
        {
          type: "抢注直接得标",
          des: "除国内cn直接得标",
          commission: "5元",
        },
        {
          type: "代理主帐户竞价域名得标",
          des: "差额=得标价格-外部价格",
          commission: "差额的60%",
        },
        {
          type: "代理下属用户竞价域名得标",
          des: "差额=得标价格-外部价格",
          commission: "差额的40%",
        },
        {
          type: "竞价闯入",
          des: "只有最后未得标才有提成.",
          commission: "25元",
        },
        {
          type: "一口价域名出售",
          des: "只返给购买的用户代理.",
          commission: "2%",
        },
        {
          type: "安全联盟认证",
          des: "QQ绿色认证",
          commission: "认证费的20%",
        },
        {
          type: "SSL证书",
          des: "SSL证书",
          commission: "费用的20%",
        },
        {
          type: "高仿DNS",
          des: "高防DNS",
          commission: "费用的20%",
        },
      ],
      tipsList: [
        "1、代理无需担心自己代理平台下的用户流失，如：你怕 万一你的代理用户在你平台注册了一个用户，然后等下次发现了个别的代理平台或者发现了本主站，然后以后就不进您的代理平台了。放心 本站代理下的用户只要注册时在您的代理平台，那么此用户终身将属于您的代理用户，不管此用户到哪个平台登录，所产生的提成都属于您。",
        "2、竞价域名得标的提成是这样计算的，差额=本站价格-外部价格（外部价格都可在域名竞价单页看到）代理提成=差额*提成返款率",
        "3、您当前自己的代理账户也可享受提成，消费后提成自动返到账户中，可查看资金明细",
        "4、竞价违约域名，代理不享受任何提成",
        "5、特别注意：上面提成展示是当前执行的，但并非永久不变，我们未来会随着平台发展要做相应的变化，如有变化我们会在代理群进行通知，不另做通知。请各位代理都加入代理QQ群！",
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.banner {
  max-width: 1920px;
  min-width: 1200px;
  width: 100%;
  margin: 0 auto;
  height: 520px;
  @include bg-setting("apply-banner");
}
.apply-box-title {
  @include size(120px, 40px);
  border: 1px solid #3d3d3d;
  border-radius: 5px;
  text-align: center;
  line-height: 38px;
  font-size: 16px;
  color: #373737;
  font-weight: 600;
  margin: 0 auto;
}
.requirement-list {
  height: 220px;
  width: 100%;
  border-bottom: #b1b1b1 solid 1px;
  padding: 10px 100px 0;

  .icon {
    @include size(64px);
    @include bg-setting(null, contain, center);
    margin-bottom: 20px;

    &.requ1 {
      background-image: url("~@/assets/images/requ1@2x.png");
    }
    &.requ2 {
      background-image: url("~@/assets/images/requ2@2x.png");
    }
  }
}
.welfare-item {
  @include size(360px, 150px);
  border: 1px solid #dedede;
  padding: 30px;
  transition: box-shadow 0.3s;
  margin-bottom: 30px;

  &:hover {
    @include b-sh;
  }
}
.strategy-item {
  @include size(220px, 300px);
  padding: 30px;
  background-color: #fff;
  border-radius: 10px;

  .line {
    @include size(40px, 2px);
    background-color: #f9521f;
    margin: 12px 0 15px;
  }
  .icon {
    @include size(56px);
    @include bg-setting(null, contain, center);
    margin-bottom: 20px;

    &.strategy1 {
      background-image: url("~@/assets/images/strategy1@2x.png");
    }
    &.strategy2 {
      background-image: url("~@/assets/images/strategy2@2x.png");
    }
    &.strategy3 {
      background-image: url("~@/assets/images/strategy3@2x.png");
    }
    &.strategy4 {
      background-image: url("~@/assets/images/strategy4@2x.png");
    }
    &.strategy5 {
      background-image: url("~@/assets/images/strategy5@2x.png");
    }
  }
}
table,
table tr td,
table tr th {
  border: 1px solid #dedede;
}
.line-table-area {
  width: 100%;
  table-layout: fixed;
  box-sizing: border-box;
  border-collapse: collapse;
  thead {
    background-color: #f9521f;
    color: #fff;
    font-size: 16;
    th {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      max-width: 100px;
    }
  }
  tbody {
    td {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      max-width: 170px;
      padding: 0 8px;
    }
  }
  .line-style {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.function {
  @include size(1200px, 586px);
  @include bg-setting("function", contain, center);
}
.m-r-60 {
  margin-right: 60px;
}
.m-r-25 {
  margin-right: 25px;
}
.h2-title {
  width: 100%;
  text-align: center;
  padding-top: 65px;
  margin-bottom: 40px;
}
.flx-w {
  flex-wrap: wrap;
}
.bg-w {
  background-color: #fff;
}
.bg-g {
  background-color: #f2f2f2;
}
</style>
